<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="600"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Coordinates and dimensions
    const x_center = 250;
    const y_ground = 550;
    const y_table = 250;
    const table_width = 320;
    const table_leg_left_x = x_center - table_width / 2;
    const table_leg_right_x = x_center + table_width / 2;
    const hole_half_width = 8;
    const L_pixels = 300;
    const y_rod_top = y_table - L_pixels / 2;
    const y_rod_bottom = y_table + L_pixels / 2;
    const y_insect = y_table + L_pixels / 4; // Midpoint of lower half

    // Function to draw a fraction
    function drawFraction(numerator, denominator, x, y, fontSize) {
        const originalFont = ctx.font;
        ctx.font = `italic ${fontSize}px Times New Roman`;
        const numMetrics = ctx.measureText(numerator);
        const denMetrics = ctx.measureText(denominator);
        const fracWidth = Math.max(numMetrics.width, denMetrics.width) * 1.2;

        // Numerator
        ctx.fillText(numerator, x, y - fontSize * 0.55);
        // Denominator
        ctx.fillText(denominator, x, y + fontSize * 0.55);
        // Fraction line
        ctx.beginPath();
        ctx.moveTo(x - fracWidth / 2, y);
        ctx.lineTo(x + fracWidth / 2, y);
        ctx.stroke();
        ctx.font = originalFont;
    }

    // Clear canvas
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'black';

    // 1. Draw Ground
    ctx.beginPath();
    ctx.moveTo(0, y_ground);
    ctx.lineTo(canvas.width, y_ground);
    ctx.stroke();
    // Hatching for the ground
    ctx.save();
    ctx.lineWidth = 1;
    for (let i = -y_ground; i < canvas.width; i += 15) {
        ctx.beginPath();
        ctx.moveTo(i, y_ground);
        ctx.lineTo(i + 30, y_ground + 30);
        ctx.stroke();
    }
    ctx.restore();

    // 2. Draw Table
    // Legs
    ctx.beginPath();
    ctx.moveTo(table_leg_left_x, y_ground);
    ctx.lineTo(table_leg_left_x, y_table);
    ctx.moveTo(table_leg_right_x, y_ground);
    ctx.lineTo(table_leg_right_x, y_table);
    ctx.stroke();
    // Top surface
    ctx.beginPath();
    ctx.moveTo(table_leg_left_x, y_table);
    ctx.lineTo(x_center - hole_half_width, y_table);
    ctx.moveTo(x_center + hole_half_width, y_table);
    ctx.lineTo(table_leg_right_x, y_table);
    ctx.stroke();

    // 3. Draw Rod
    ctx.beginPath();
    ctx.moveTo(x_center, y_rod_top);
    ctx.lineTo(x_center, y_rod_bottom);
    ctx.stroke();

    // 4. Draw Insect (小虫)
    ctx.beginPath();
    ctx.arc(x_center, y_insect, 5, 0, 2 * Math.PI);
    ctx.fill();

    // 5. Draw Candle
    const candle_width = 40;
    const candle_height = 50;
    const candle_x = x_center - candle_width / 2;
    const candle_y = y_ground - candle_height;
    // Base
    ctx.beginPath();
    ctx.rect(candle_x, candle_y, candle_width, candle_height);
    ctx.stroke();
    // Hatching for candle (simplified to match original)
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(candle_x, candle_y + candle_height * 0.6);
    ctx.lineTo(candle_x + candle_width, candle_y);
    ctx.moveTo(candle_x, candle_y + candle_height);
    ctx.lineTo(candle_x + candle_width, candle_y + candle_height * 0.4);
    ctx.stroke();
    ctx.restore();
    // Flame
    ctx.beginPath();
    ctx.moveTo(x_center, candle_y);
    ctx.quadraticCurveTo(x_center + 15, candle_y - 10, x_center + 5, candle_y - 25);
    ctx.stroke();

    // 6. Draw Labels
    const label_font_size = 24;
    ctx.font = `italic ${label_font_size}px Times New Roman`;
    ctx.textAlign = 'center';

    // Mass 'M'
    ctx.fillText('M', x_center - 80, y_table - 80);

    // Mass 'm'
    ctx.fillText('m', x_center - 50, y_insect + 5);

    // L/2 annotations
    const annot_x = x_center + 70;
    const y_annot_upper = y_table - (L_pixels / 4); // y-pos for upper L/2 label
    const y_annot_lower = y_table + (L_pixels / 4); // y-pos for lower L/2 label

    // The separator line between the two L/2 labels
    ctx.beginPath();
    ctx.moveTo(annot_x - 25, y_table);
    ctx.lineTo(annot_x + 25, y_table);
    ctx.stroke();

    // Upper L/2
    drawFraction('L', '2', annot_x, y_annot_upper, label_font_size);
    // Lower L/2
    drawFraction('L', '2', annot_x, y_annot_lower, label_font_size);

</script>
</body>
</html>